<template>
  <el-dialog
    title="通过资料上传"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="730px"
  >
    <el-form ref="courseForm" v-loading="loading" class="gl_form_mini" style="padding: 0 30px" label-width="80px">
      <div style="display:flex">
        <p>
          考官:
        </p>
        <div>
          <div v-for="(item,index) in courseForm" :key="index" style="display:flex">
            <el-form-item label="姓名" required>
              <el-input v-model="item.name" :disabled="btn" placeholder="请输入考官名称" maxlength="16" size="mini" type="text" />
            </el-form-item>
            <el-form-item label="考官编号" required>
              <el-input v-model="item.no" :disabled="btn" placeholder="请输入考官编号" maxlength="16" size="mini" type="text" />
            </el-form-item>
            <el-button type="text" :disabled="btn" style="height:30px;margin-left:10px;color:red" size="mini" @click="deleteCoach(index)">删除</el-button>
          </div>
        </div>
        <el-button :disabled="btn" icon="el-icon-circle-plus-outline" style="height:30px;margin-left:10px" size="mini" @click="addCoach()" />
      </div>

      <div class="upload">
        <span style="margin-left:-10px"><el-form-item label="考试内容" /></span>
        <div v-if="!btn">
          <upload-file
            ref="eaxmUpload"
            :action="uploadAction"
            file-type="file"
            format-file=".pdf,.doc,.docx,.word"
            default-file-name="上传考试内容"
            :max-size="5120"
            @uploadSuccess="attachmentUploadSuccess"
          />
        </div>
        <!-- <el-link v-if="ApproveDuanExamRequestInput.examContentUrl" style="margin-left:33px" type="primary" :href="getStaticFileUrl(ApproveDuanExamRequestInput.examContentUrl)" target="_blank">下载考试内容</el-link> -->
      </div>

      <div class="upload">
        <span style="margin-left:-10px"><el-form-item required label="批复文件" /></span>
        <div v-if="!btn">
          <upload-file
            ref="attachmentUpload"
            :action="uploadAction"
            file-type="file"
            format-file=".pdf,.doc,.docx,.word"
            default-file-name="上传批复内容"
            :max-size="5120"
            @uploadSuccess="attachmentUpload"
          />
        </div>
        <!-- <el-link v-if="ApproveDuanExamRequestInput.replyFileUrl" style="margin-left:33px" type="primary" :href="getStaticFileUrl(ApproveDuanExamRequestInput.replyFileUrl)" target="_blank">下载批复内容</el-link> -->
      </div>
      <div style="margin-top:10px">
        <el-input
          v-model="ApproveDuanExamRequestInput.approveComment"
          :disabled="btn"
          type="textarea"
          placeholder="请输入内容"
          maxlength="30"
          show-word-limit
        />
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" :disabled="btn" :loading="loading" size="mini" @click="submit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import uploadFile from './UploadFile.vue';
import { api_PUT_ClubDuanExamRequestIdApprove } from '@/extend/api/hallswaggerApi/app.js';
import { ApproveDuanExamRequestInput } from '@/lib/form/hall/swaggerForm';
export default {
  components: {
    uploadFile
  },
  data() {
    return {
      btn: false,
      uploadAction: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/document`,
      btnUpLoading: false,
      ApproveDuanExamRequestInput: new ApproveDuanExamRequestInput(), // 级段位申请
      loading: false,
      textarea: '',
      dialogVisible: false,
      courseForm: [{}]
    };
  },
  watch: {
    dialogVisible: {
      deep: true,
      handler(val) {
        if (!val) {
          this.courseForm = [{}];
          this.ApproveDuanExamRequestInput = new ApproveDuanExamRequestInput();
          this.$nextTick(() => {
            this.$refs.attachmentUpload.file = '';
            this.$refs.eaxmUpload.file = '';
          });
        }
      }
    }
  },
  methods: {
    beforeUpload(file) {
      this.file = file;
      console.log(this.file);
    },
    // 导入名单
    submit() {
      this.loading = true;
      for (var i = 0; i < this.courseForm.length; i++) {
        if (this.courseForm[i].no === undefined || this.courseForm[i].name === undefined) {
          this.$message({
            message: '请填写考官信息'
          });
          this.loading = false;
          return;
        } else {
          if (this.courseForm[i].no === '' || this.courseForm[i].name === '') {
            this.$message({
              message: '请填写考官信息'
            });
            this.loading = false;
            return;
          }
        }
      }
      if (this.ApproveDuanExamRequestInput.replyFileUrl === null) {
        this.$message({
          message: '请上传批复文件'
        });
        this.loading = false;
        return;
      }
      this.ApproveDuanExamRequestInput.officials = this.courseForm;
      this.ApproveDuanExamRequestInput.isApproved = true;
      api_PUT_ClubDuanExamRequestIdApprove(this.$route.query.id, this.ApproveDuanExamRequestInput).then(res => {
        this.loading = false;
        this.$message({
          type: 'success',
          message: '通过成功'
        });
        this.$router.push({ name: 'Maintenance' });
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 添加教练
    addCoach() {
      this.courseForm.push({});
    },
    // 删除教练
    deleteCoach(index) {
      if (this.courseForm.length > 1) {
        this.courseForm.splice(index, 1);
      } else {
        this.$message({ type: 'warning', message: '请填写考官信息' });
      }
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 附件上传
    attachmentUploadSuccess(fileUrl) {
      this.$set(this.ApproveDuanExamRequestInput, 'examContentUrl', fileUrl.tempUrl);
    },
    // 附件上传
    attachmentUpload(fileUrl) {
      this.$set(this.ApproveDuanExamRequestInput, 'replyFileUrl', fileUrl.tempUrl);
    }
  }
};
</script>

<style scoped>
.up_button {
  display: flex;
height: 40px;
align-items: center;
}
.up_button>div {
  margin-right: 16px;
}
.upload {
display:flex;
margin-top: 10px;
}
.upload>span{
  line-height:40px;
}
  .upload>div {
    width:160px;
    margin-left:10px;
    display:flex;
    align-items:center;
    margin-top:-11px;
  }
</style>
